<template>
  <div class="search-form">
    <!-- 头部tab切换 -->
    <el-row type="flex" class="search-tab">
      <span
        v-for="(item, index) in tabs"
        :key="index"
        :class="{active: index === currentTab}"
        @click="handleSearchTab(index)"
      >
        <i :class="item.icon" />{{ item.name }}
      </span>
    </el-row>

    <el-form ref="form" class="search-form-content" label-width="80px">
      <el-form-item label="出发城市">
        <!-- fetch-suggestions 返回输入建议的方法 -->
        <!-- select 点击选中建议项时触发 -->
        <el-autocomplete
          v-model="form.departCity"
          highlight-first-item
          :trigger-on-focus="false"
          :fetch-suggestions="queryDepartSearch"
          placeholder="请输入出发城市"
          class="el-autocomplete"
          @select="handleDepartSelect"
        />
      </el-form-item>
      <el-form-item label="到达城市">
        <el-autocomplete
          v-model="form.destCity"
          highlight-first-item
          :trigger-on-focus="false"
          :fetch-suggestions="queryDestSearch"
          placeholder="请输入到达城市"
          class="el-autocomplete"
          @select="handleDestSelect"
        />
      </el-form-item>
      <el-form-item label="出发时间">
        <!-- change 用户确认选择日期时触发 -->
        <el-date-picker
          v-model="form.departDate"
          type="date"
          placeholder="请选择日期"
          style="width: 100%;"
          @change="handleDate"
        />
      </el-form-item>
      <el-form-item label="">
        <el-button
          style="width:100%;"
          type="primary"
          icon="el-icon-search"
          @click="handleSubmit"
        >
          搜索
        </el-button>
      </el-form-item>
      <div class="reverse">
        <span @click="handleReverse">换</span>
      </div>
    </el-form>
  </div>
</template>

<script>
import moment from 'moment'
export default {
  name: 'SearchForm',
  data () {
    return {
      tabs: [
        { icon: 'iconfont icondancheng', name: '单程' },
        { icon: 'iconfont iconshuangxiang', name: '往返' }
      ],
      currentTab: 0,
      form: {
        departCity: '', // 出发城市
        departCode: '', // 出发城市的代码
        destCity: '', // 到达城市
        destCode: '', // 到达城市的代码
        departDate: '' // 出发日期
      }
    }
  },
  methods: {
    // tab切换时触发
    handleSearchTab (index) {
      if (index === 1) {
        this.$confirm('目前暂不支持往返，请使用单程选票！', '提示', {
          confirmButtonText: '确定',
          showCancelButton: false,
          type: 'warning'
        })
      }
    },
    getCities (value, callback) {
      if (value.trim() === '') {
        const emptyArr = []
        callback(emptyArr)
        return
      }
      this.$axios.get('/airs/city?name=' + value).then((res) => {
        const cities = res.data.data.filter(city => city.sort).map((item) => {
          return {
            ...item,
            value: item.name
          }
        })
        callback(cities)
      })
    },
    // 出发城市输入框获得焦点时触发
    // value 是选中的值，callback是回调函数，接收要展示的列表
    queryDepartSearch (value, callback) {
      this.getCities(value, callback)
    },

    // 目标城市输入框获得焦点时触发
    // value 是选中的值，callback是回调函数，接收要展示的列表
    queryDestSearch (value, callback) {
      this.getCities(value, callback)
    },

    // 出发城市下拉选择时触发
    handleDepartSelect (item) {
      this.form.departCode = item.sort
    },

    // 目标城市下拉选择时触发
    handleDestSelect (item) {
      this.form.destCode = item.sort
    },

    // 确认选择日期时触发
    handleDate (value) {
      this.form.departDate = moment(value).format('YYYY-MM-DD')
    },

    // 触发和目标城市切换时触发
    handleReverse () {
      const oldDestCity = this.form.destCity
      const oldDestCode = this.form.destCode

      this.form.destCity = this.form.departCity
      this.form.destCode = this.form.departCode

      this.form.departCity = oldDestCity
      this.form.departCode = oldDestCode
    },

    // 提交表单是触发
    handleSubmit () {
      // console.log(this.form)
      // 因为不能参数不能带有“市”字，所以要把它替换成空字符串
      const { departCity, destCity, ...data } = this.form
      const params = {
        ...data
      }
      params.departCity = departCity.replace(/市$/, '')
      params.destCity = destCity.replace(/市$/, '')
      this.$axios.get('/airs', {
        params
      }).then((res) => {
        if (res.data.flights.length === 0) {
          this.$confirm('暂无该航班数据', '提示', {
            confirmButtonText: '确定',
            showCancelButton: false,
            type: 'warning'
          })
          return
        }
        this.$router.push({
          path: '/air/flights',
          query: params
        })
        this.$store.commit('addHistory', params)
      })
    }
  }
}
</script>

<style scoped lang="less">
.search-form{
    border:1px #ddd solid;
    border-top:none;
    width:360px;
    height:350px;
    box-sizing: border-box;
}

.search-tab{
  span{
    display: block;
    flex:1;
    text-align: center;
    height:48px;
    line-height: 42px;
    box-sizing: border-box;
    border-top:3px #eee solid;
    background:#eee;
  }

  .active{
    border-top-color: orange;
    background:#fff;
  }

  i{
    margin-right:5px;
    font-size: 18px;

    &:first-child{
      font-size:16px;
    }
  }
}

.search-form-content{
  padding:15px 50px 15px 15px;
  position: relative;

  .el-autocomplete{
    width: 100%;
  }
}

.reverse{
  position:absolute;
  top: 35px;
  right:15px;

  &:after,&:before{
      display: block;
      content: "";
      position: absolute;
      left:-35px;
      width:25px;
      height:1px;
      background:#ccc;
  }

  &:after{
      top:0;
    }

    &:before{
      top:60px;
    }

  span{
    display: block;
    position:absolute;
    top: 20px;
    right:0;
    font-size:12px;
    background: #999;
    color:#fff;
    width:20px;
    height:20px;
    line-height: 18px;
    text-align: center;
    border-radius: 2px;
    cursor: pointer;

    &:after,&:before{
      display: block;
      content: "";
      position: absolute;
      left:10px;
      width:1px;
      height:20px;
      background:#ccc;
    }

    &:after{
      top:-20px;
    }

    &:before{
      top:20px;
    }
  }
}
</style>
